<template>
    <div style="height: 562px;">
        <!-- <div style="margin-top:20px">
            <span style="font-size:25px; color:#ff688c; ">
                按用途订花:
            </span>
        </div> -->
        


        <div class="souSuo">
            <el-button @click="reset" size="small" style="margin:0px -30px 0 190px;"><span style="font-size:14px; color:blueviolet; font-weight:600">重置已选条件</span></el-button>
            <el-input clearable v-model="inputMessage"  style="margin-top:10px; width:400px; margin-left:70px; font-size:18px" size="large" placeholder="请输入......" clearable></el-input>
            <el-button @click="Search(inputMessage)"  size="medium" style="margin-left: 7px; background-color:orange" round>
                    <span style="font-size: 16px; color:blueviolet;">搜索</span>
            </el-button>

            <div style="margin-left: 30px; margin-top:10px">
                <el-form>
                    <el-form-item label-width="120px" size="medium ">
                        <span slot="label">
                            <span style="font-size:22px; color:chocolate">价格:</span>
                        </span>
                        <el-checkbox-group v-model="checkList1" @change="search">
                            <el-checkbox label="100"><span style="font-size:18px">100元以内</span></el-checkbox>
                            <el-checkbox label="100-199"><span style="font-size:18px">100-199元</span></el-checkbox>
                            <el-checkbox label="200-299"><span style="font-size:18px">200-299元</span></el-checkbox>
                            <el-checkbox label="300-399"><span style="font-size:18px">300-399元</span></el-checkbox>
                            <el-checkbox label="400-499"><span style="font-size:18px">400-499元</span></el-checkbox>
                            <el-checkbox label="500"><span style="font-size:18px">500元以上</span></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label-width="120px" size="medium " style="margin-top:-22px">
                        <span slot="label">
                            <span style="font-size:22px; color:chocolate">适用:</span>
                        </span>
                        <el-checkbox-group v-model="checkList2" @change="search">
                            <el-checkbox label="恋人"><span style="font-size:18px">恋人</span></el-checkbox>
                            <el-checkbox label="朋友"><span style="font-size:18px">朋友</span></el-checkbox>
                            <el-checkbox label="同事"><span style="font-size:18px">同事</span></el-checkbox>
                            <el-checkbox label="父母"><span style="font-size:18px">父母</span></el-checkbox>
                            <el-checkbox label="长辈"><span style="font-size:18px">长辈</span></el-checkbox>
                            <el-checkbox label="老师"><span style="font-size:18px">老师</span></el-checkbox>
                            <el-checkbox label="同学"><span style="font-size:18px">同学</span></el-checkbox>
                            <el-checkbox label="领导"><span style="font-size:18px">领导</span></el-checkbox>
                            <el-checkbox label="客户"><span style="font-size:18px">客户</span></el-checkbox>
                            <el-checkbox label="病人"><span style="font-size:18px">病人</span></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <!-- <el-form-item label-width="120px" size="medium" style="margin-top:-22px">
                        <span slot="label">
                            <span style="font-size:22px; color:chocolate">用途:</span>
                        </span>
                        <el-checkbox-group v-model="checkList3">
                            <el-checkbox label="追求女神"><span style="font-size:18px">追求女神</span></el-checkbox>
                            <el-checkbox label="老婆生日"><span style="font-size:18px">老婆生日</span></el-checkbox>
                            <el-checkbox label="道歉鲜花"><span style="font-size:18px">道歉鲜花</span></el-checkbox>
                            <el-checkbox label="送给母亲"><span style="font-size:18px">送给母亲</span></el-checkbox>
                            <el-checkbox label="父母生日"><span style="font-size:18px">父母生日</span></el-checkbox>
                            <el-checkbox label="追求表白"><span style="font-size:18px">追求表白</span></el-checkbox>
                            <el-checkbox label="送给男神"><span style="font-size:18px">送给男神</span></el-checkbox>
                            <el-radio :label="8"><span style="font-size:18px">感谢恩师</span></el-radio>
                            <el-radio :label="9"><span style="font-size:20px">诚挚道歉&nbsp; </span></el-radio>
                            <el-radio :label="10"><span style="font-size:20px">赠礼贵人&nbsp; </span></el-radio>
                            <el-radio :label="11"><span style="font-size:20px">祝贺&nbsp; </span></el-radio>
                            <el-radio :label="12"><span style="font-size:20px">新年&nbsp; </span></el-radio>
                        </el-checkbox-group>
                    </el-form-item> -->
                </el-form>

            </div>
            

        </div>

        <div style="margin-top:-20px">
            <span style="color:deeppink; font-size:19px; font-weight:800">当前已选条件:</span>
            <span style="color:brown; font-size:21px; font-weight:800"  v-for="item in selectCondition1" :key="item">【{{ item }}】</span>
            <span style="color:brown; font-size:21px; font-weight:800"  v-for="item in selectCondition2" :key="item">【{{ item }}】</span>
        </div>

        <div style="margin: 10px 0">
                <el-row :gutter="10">
                    <el-col :span="6" v-for="item in tableData" :key="item.id" style="margin-bottom: 10px">
                        <el-card style="background-color:pink">
                            <div>
                                <div style="margin-right: 2px;border-radius: 10px;overflow: hidden">
                                    <img :src="item.img" alt="" style="width: 220px; height: 220px;cursor: pointer " @click="$router.push('/front/detail?id=' + item.id)">
                                </div>
                                
                                <div style="text-align: center; padding: 1px 0; margin-top: 10px">
                                    <span style="color:chocolate; font-size:large;cursor: pointer"><b @click="$router.push('/front/detail?id=' + item.id)">{{ item.name }}</b></span>
                                </div>
                                <div style="text-align: center; padding: 1px 0; margin-top: 10px; margin-right: 10px">
                                    <span style="color:crimson; font-size:large;">￥{{ item.price }}</span>
                                </div>
                                <!-- <div style="margin-top: 10px; margin-left: 15px">
                                    <el-button type="primary">详情</el-button>
                                    <el-button type="warning">添加</el-button>
                                </div> -->
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
        </div>

        <div style="margin: 50px 0 0 0">
            <span style="font-size:33px; color:palevioletred; font-weight:600">鲜花特惠&nbsp;&nbsp;&nbsp;</span>
            <span style="font-size:20px; color:brown">总有你想不到的低价，疯狂订购中...</span>

            <div>
                <el-row>
                    <el-col :span="12">
                        <el-card class="box-card1"  style="background-color:blanchedalmond">
                            <div>
                                <el-row>
                                    <el-col :span="12">
                                        <div style="height:339px;" @click="$router.push('/front/detail?id=' + 15)">
                                            <el-card style="width:260px; height: 290px; margin:20px 0 0 0;" shadow="hover">
                                                <img :src="'https://i.za3.cn/g/1/2022/09/1_07177822367149669_418.jpg?v=20211027'" alt="" style="width:260px; height: 290px;cursor: pointer ; margin: -20px 0 0 -20px" @click="$router.push('/front/detail?id=' + item.id)">
                                            </el-card>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-row>
                                            <div style="margin:20px 0 0 70px" @click="$router.push('/front/detail?id=' + 15)">
                                                <span style="font-size:32px; color:firebrick; font-weight:700; cursor: pointer"><a>美好年华</a></span>
                                            </div>
                                        </el-row>
                                        <el-row>
                                            <div style="margin:30px 0 0 30px">
                                                <span style="font-size:20px; color:darksalmon; font-style:italic;">11枝香槟玫瑰搭配5枝橙色多头玫、尤加利叶</span>
                                            </div>
                                        </el-row>
                                        <el-row>
                                            <div style="margin:30px 0 0 30px">
                                                <span style="font-size:37px; color:orangered">￥246.00</span>
                                            </div>
                                        </el-row>
                                        <el-row>
                                            <div style="margin:30px 0 0 30px">
                                                <span style="font-size:22px; color:orange">我眼中的你，年华美丽，盛开如诗。</span>
                                            </div>
                                        </el-row>
                                    </el-col>
                                </el-row>
                                <el-row style="margin: 0px 0 40px -18px">
                                        <el-col :span="4" v-for="item in topData4" :key="item.id" style="height:120px; width:120px; margin-left:11px">
                                            <div @click="$router.push('/front/detail?id=' + item.id)">
                                                    <el-card style="background-color:antiquewhite; margin-left:-7px;" shadow="hover">
                                                        <img :src="item.img" alt="" style="width:110px; height: 120px;cursor: pointer ; margin: 0 0 0 -12px" @click="$router.push('/front/detail?id=' + item.id)">
                                                    </el-card>
                                            </div>
                                        </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </el-col>

                    <el-col :span="7" v-for="item in topData2" :key="item.id" style="margin-top:18px">
                        <el-card class="box-card2">
                            <div>
                                <el-card class="box-card5" shadow="hover" >
                                    <img :src="item.img" alt="" style="width:320px; height: 269px;cursor: pointer ; margin: -20px 0 0 -40px" @click="$router.push('/front/detail?id=' + item.id)">
                                </el-card>
                            </div>
                        </el-card>
                        <!-- <el-card class="box-card2">
                            <div>
                                <el-card class="box-card5" shadow="hover" >
                                    <img :src="'https://i.za3.cn//shop/textures/05901641547910095.jpg'" alt="" style="width:320px; height: 269px;cursor: pointer ; margin: -20px 0 0 -40px" @click="$router.push('/front/detail?id=' + item.id)">
                                </el-card>
                            </div>
                        </el-card> -->
                        <!-- <el-card class="box-card3">
                            <div>
                                <el-card class="box-card6" shadow="hover">
                                    <img :src="'https://i.za3.cn//shop/textures/05987918368614658.jpg'" alt="" style="width:320px; height: 269px;cursor: pointer ; margin: -20px 0 0 -40px" @click="$router.push('/front/detail?id=' + item.id)">
                                </el-card>
                            </div>
                        </el-card> -->
                    </el-col>

                    <el-col :span="5">
                        <el-card class="box-card4">
                            <div>
                                <el-row>
                                    <div style="margin: 0px 0 0 10px">
                                        <span style="font-size:30px; color:palevioletred; font-weight:800">热卖排行榜</span>
                                    </div>
                                </el-row>
                                <el-row v-for="top in topData" :key="top.name">
                                    <div style="margin: 7px 0 0 -10px; cursor: pointer" @click="$router.push('/front/detail?id=' + top.id)" class="top">
                                        <span style="font-size:20px; color:firebrick; margin:0 0 0 -10px; font-weight:600">【{{top.name}}】</span>
                                        <span style="font-size:20px;">&nbsp;</span>
                                        <span style="font-size:27px; font-style:italic; color:coral">￥{{ top.price }}</span>
                                        <span style="font-size:20px;">&nbsp;</span>
                                        <!-- <el-tag type="danger"><span style="font-size:18px; font-style:italic;display:block; margin:0 0 0 40px; color:deeppink">销量: 142</span></el-tag> -->
                                        <span style="font-size:18px; font-style:italic;display:block; margin:0 0 0 40px; color:deeppink">销量：{{ top.sales }}</span>
                                    </div>
                                </el-row>
                                <!-- <el-row>
                                    <div style="margin: 20px 0 0 0">
                                        <span style="font-size:20px">不不不</span>
                                    </div>
                                </el-row>
                                <el-row>
                                    <div  style="margin: 20px 0 0 0">
                                        <span style="font-size:20px">冲冲冲</span>
                                    </div>
                                </el-row>
                                <el-row>
                                    <div  style="margin: 20px 0 0 0">
                                        <span style="font-size:20px">对对对</span>
                                    </div>
                                </el-row>
                                <el-row>
                                    <div  style="margin: 20px 0 0 0">
                                        <span style="font-size:20px">嗯嗯嗯</span>
                                    </div>
                                </el-row>
                                <el-row>
                                    <div  style="margin: 20px 0 0 0">
                                        <span style="font-size:20px">方法付</span>
                                    </div>
                                </el-row>
                                <el-row>
                                    <div  style="margin: 20px 0 0 0">
                                        <span style="font-size:20px">嘎嘎嘎</span>
                                    </div>
                                </el-row> -->
                            </div>  
                        </el-card>
                    </el-col>
                </el-row>

            </div>

            <!-- <div>
                <el-card class="box-card2">
                    <div>
                        信心满满
                    </div>
                </el-card>
            </div> -->

        </div>

    </div>
</template>

<script>
import { type } from 'os';


export default {
  name: 'Popular',
  data(){
    return{
        checkedCities: ['上海', '北京'],
        cities: ['上海', '北京', '广州', '深圳'],
        checkList1: [],
        checkList2: [],
        checkList3: [],
        tableData:[],
        inputMessage: '',
        selectCondition1:['无'],
        selectCondition2:[],
        imgs:[
            'https://i.za3.cn/g/1/2017/03/1_05440351697148592_320.jpg',
            'https://i.za3.cn/g/1/2016/11/1_05336740348125247_320.jpg',
            'https://i.za3.cn/g/1/2016/12/1_05345977633727666_320.jpg',
            'https://i.za3.cn/g/1/2020/05/1_06425115929329209_320.jpg',
            // 'https://i.za3.cn/g/1/2016/11/1_05338337408425270_320.jpg',
        ],
        topData:[
            {top:1,name:'爱你如初',price:179,sales:193},
            {top:2,name:'爱你如初',price:171,sales:183},
            {top:3,name:'爱你如初',price:172,sales:173},
            {top:4,name:'爱你如初',price:173,sales:163},
            {top:5,name:'爱你如初',price:174,sales:153},
            {top:6,name:'爱你如初',price:175,sales:153},
            {top:7,name:'爱你如初',price:176,sales:133},
        ],
        topData4:{},
        topData2:{},
    }
  },
  created(){
        this.request.get("flower/frontPage").then(res =>{
            console.log('1',res.data);
            // this.tableData = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
            this.tableData = res.data.slice(0,12)
            this.total = res.data.length;
            console.log('西瓜',this.tableData);
        });
        this.request.get('/flower/queryBySales').then(res =>{
            if(res.code === '200'){
                this.topData = res.data.slice(0,7);
                this.topData4 = res.data.slice(0,4);
                this.topData2 = res.data.slice(0,2);
                console.log('要下班啦',this.topData2);
            }
        })
    },
  methods:{
    dian(){
        alert('嘿嘿嘿')
    },
    search(){
        this.selectCondition1 = []
        this.selectCondition2 = []
        console.log('checkList1',this.checkList1);
        console.log('checkList2',this.checkList2);
        console.log('checkList3',this.checkList3);
        console.log('checkList777',this.checkList1[0]);
        console.log('selections',this.selectCondition1);
        // if(this.checkList1[0] === '100'){
            for(let i = 0; i<this.checkList1.length; i++){
                if(this.checkList1[i] === '100'){
                    this.selectCondition1.push('100元以内')
                }else if(this.checkList1[i] === '500'){
                    this.selectCondition1.push('500元以上')
                }else{
                    this.selectCondition1.push(this.checkList1[i]+'元')
                }
                console.log('甘蔗',this.checkList1[i])
            }
        // }
        // this.selectCondition1 = this.checkList1;
        this.selectCondition2 = this.checkList2;
        let checkStringList = this.checkList1.join(",");
        let checkStringList2 = this.checkList2.join(",");
        console.log('转换之后',checkStringList);
        console.log('this.inputMessage:',this.inputMessage);
        this.request.get('flower/searchByCondition',{params:{
            checkList: checkStringList,
            checkList2: checkStringList2,
            message: this.inputMessage,
        }}).then(res =>{
            console.log('res:',res)
            if(res.code === '200'){
                this.tableData = res.data.slice(0,12);
            }else{
                this.$message.error('搜索失败,请重新输入！')
            }
        })
    },
    reset(){
        this.checkList1 = [];
        this.checkList2 = [];
        this.checkList3 = [];
        this.search();
    },
    Search(message){
            this.isSeKuai = false;
            console.log('message',message);
            this.purpose = message;
            this.request.get('flower/queryByPurpose/'+ message).then(res=>{
                console.log('queryByPurpose',res);
                this.tableData = res.data.slice(0,12)
                this.total = res.data.length
                this.$el.querySelector("#purposeId").scrollIntoView()
            })
        },

  }
};
</script>

<style scoped>
.box-card1{
    height: 540px;
    margin: 20px 0 0 0; 
}
.box-card2{
    height: 261px;
    margin: 0px 0 0 0;
    background-color:blanchedalmond;
}
.box-card3{
    height: 270px;
    margin: 0px 0 0 0; 
    background-color:blanchedalmond;
}
.box-card4{
    height: 540px;
    margin: -260px 0 0 0;
    background-color:blanchedalmond;
}
.box-card5{
    height: 250px;
    width: 310px;
    margin: -10px 0 0px -10px;
    background-color:blanchedalmond;
}
.box-card6{
    height: 250px;
    width: 310px;
    margin: 0px 0 0 -10px;
    background-color:blanchedalmond;
}

.top:hover{
    background-color:pink;
}
</style>